/**
 * value部分的key展示
 */
Vue.component("data-key", {
    template :
        `
        <Alert show-icon type="" style="margin-bottom:0px;padding: 5px 16px 5px 69px;">
            Key
            <Icon type="key" slot="icon"></Icon>
            <template slot="desc">
                <Tooltip content="点击复制key..." placement="top-start">
                    <a v-bind:id="'clip' + data.count" v-on:click="copy">{{data.key}}</a>
                </Tooltip>
            </template>
            <Poptip placement="left-start" confirm width="200" title="您确认删除这条内容吗？" @on-ok="deleteKey" @on-cancel="cancel" style="position: absolute;right: 5%;">
                <Icon type="ios-trash-outline" size="30" style="cursor: pointer;"></Icon>
            </Poptip>
        </Alert>
        `,
    props : ["data"],
    methods : {
        copy : function (e) {
            var that = this, clipboard = new Clipboard("#" + e.target.id, {
                text : function () {
                    return that.data.key;
                }
            });
            clipboard.on("success", function(e) {
                that.$Message.success("key复制成功...");
            });
            clipboard.on("error", function(e) {
                that.$Message.error("key复制失败...");
            });
        },
        deleteKey: function () {

        },
        cancel: function () {
            
        }
    }
});